<template>
  <div>
    <nav-header :headerTitle="'提现'" :navBgColor="'#fff'" :headerNext="'提现记录'" @tap2next="tap2next"></nav-header>
    <div class="nav-height"></div>
    <div class="withdrawal">
      <div class="wd-header">
        <p class="tips">当前余额</p>
        <p class="money">{{currentBnlance}}</p>
      </div>
      <div class="wd-way">
        <p class="title">提现方式</p>
        <div class="wd-way-wrap">
          <div class="radio-box clearfix" @click.stop="choseWdway(1)">
            <div class="radio left" :class="{radioBorder : choseWdWayIndex!=1}">
              <img src="@/assets/images/tx_choice_sel.png" alt srcset v-show="choseWdWayIndex==1" />
            </div>
            <p class="payWay left">支付宝</p>
          </div>
          <div class="radio-box radio-box2 clearfix" @click.stop="choseWdway(0)">
            <div class="radio left" :class="{radioBorder : choseWdWayIndex!=0}">
              <img src="@/assets/images/tx_choice_sel.png" alt srcset v-show="choseWdWayIndex==0" />
            </div>
            <p class="payWay left">微信</p>
          </div>
        </div>
        <div class="amt-box">
          <div
            class="amt-item"
            :class="{active:item.selected}"
            v-for="(item,index) in amtList"
            :key="index"
            @click.stop="choseAmt(index)"
          >{{item.amt}}元</div>
        </div>
      </div>
      <!-- <div class="wd-way">
        <p class="title">提示</p>
        <div class="tips-box clearfix">
          <div class="red-dot left"></div>
          <p class="tips-content left">
            请确定您微信绑定银行卡的真实名字是
            <span class="colorFF2525">{{name}}</span>，名字错误会导致打款失败。
          </p>
        </div>
      </div> -->
      <div class="wd-footer">
        <div class="wd-ins" @click.stop="wdIns">提现说明 >></div>
        <van-button
          :disabled="isDisabled"
          class="form-btn"
          type="default"
          @click="tap2witdrawal"
        >立即提现</van-button>
      </div>
    </div>
    <!-- 微信提现信息未绑定 -->
    <div class="van-model" v-if="isShowWxBind">
      <div class="wxbind-box">
        <div class="bind-cancel" @click.stop="cancelWXBind">取消</div>
        <img src="@/assets/images/tx_light.png" alt />
        <p class="tips">微信提现信息未绑定</p>
        <van-button
          :disabled="isDisabled_bind"
          class="form-btn"
          type="default"
          @click="tap2bindWx"
        >立即绑定</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import navHeader from "@/components/NavHeader";
import { Button, Dialog, Toast } from "vant";
import mixin from '@/utils/mixin'
Vue.use(Button);
export default {
  name: "withdrawal",
  mixins: [mixin],
  components: {
    navHeader
  },
  data() {
    return {
      name: "",
      currentBnlance: 0,
      choseWdWayIndex: 0,
      choseAmtNum: 0,
      amtList: [],
      wxAuthStatus: 0, 
      isDisabled: false,
      isDisabled_bind: false,
      isShowWxBind: false,
      withdrawDesc:"",
    };
  },
  mounted() {
    this.initAmt();
    this.initAmtList();
  },
  methods: {
    // 下一步 提现记录
    tap2next() {
      this.$router.push("/infMine/withdrawalRecord");
    },
    // 初始化 当前金额
    initAmt() {
      this.$http.post("user/getUserInfo", {
          uniqueId: window.localStorage.getItem("uniqueIdByInfluencer")
        })
        .then(
          res => {
            let resData = res.data;
            this.currentBnlance = resData.accountBalance?(resData.accountBalance / 100).toFixed(2):0;
            this.name = resData.nickName;
            this.wxAuthStatus = resData.wxAuthStatus; 
          },
          err => {
            console.log(err);
          }
        );
    },
    // 初始化 提现可选标签
    initAmtList() {
      this.$http.post("soft/getWapConfig", {}).then(
        res => { 
          let wapConfig = res.data ;  
          let _amtList = [];
          wapConfig.withdrawAmountConfig.forEach(element => {
            _amtList.push({
              amt: element / 100,
              selected: false
            });
          });
          _amtList[0].selected = true;
          this.amtList = _amtList;
          this.choseAmtNum = this.amtList[0].amt;
          this.withdrawDesc = wapConfig.withdrawDesc;
        },
        err => {
          console.log(err);
        }
      );
      
    },
    // 选择提现方式
    choseWdway(valIndex) {
      this.choseWdWayIndex = valIndex;
    },
    // 选择提现金额
    choseAmt(amtIndex) {
      this.amtList.forEach(element => {
        element.selected = false;
      });
      this.amtList[amtIndex].selected = true;
      this.choseAmtNum = this.amtList[amtIndex].amt;
    },
    // 立即提现
    tap2witdrawal() {
      this.isDisabled = true; 
      // 余额不足
      if (this.currentBnlance < this.choseAmtNum) {
        Dialog.confirm({
          message: "对不起，您的余额不足",
          showCancelButton: true,
          confirmButtonText: "去赚钱",
          beforeClose: (action, done) => {
            this.isDisabled = false;
            done();
            if (action === "confirm") {
              this.$router.push("/infIndex/index");
            }
          }
        });
        return false;
      }
      //选择 0微信提现 1支付宝提现
      if (this.choseWdWayIndex == 1) {
        this.$router.push({
          path: "/infMine/cashForAlipay",
          query: {
            amt: this.choseAmtNum
          }
        });
      } else {
        // 微信授权状态 0-未授权 1-已授权
        if (this.wxAuthStatus == 0) {
          this.isShowWxBind = true;
        } else {
          let sendData = {
            uniqueId: window.localStorage.getItem("uniqueIdByInfluencer"),
            amount: this.choseAmtNum * 100, 
            platformRole: 2
          };
          this.$http.post("exchange/wxWithdrawal", sendData).then(() => { 
            this.initAmt();
            Dialog.confirm({
              title: "",
              message: "我们已经接收到您的提现申请，我们会尽快为您办理提现，提现成功后我们会给您发送通知",
              showCancelButton: false,
              confirmButtonText: "我知道了",
              beforeClose: (action, done) => {
                done();
                if (action == "confirm") {
                  this.isDisabled = false;
                  // this.$router.push("/infIndex/mine");
                }
              }
            });
          });
        }
      }
    },
    // 提现说明
    wdIns() {
      Dialog.confirm({
        title: "提现说明",
        message: this.withdrawDesc,
        showCancelButton: false,
        messageAlign:"left",
        confirmButtonText: "我知道了"
      });
    },
    // 绑定微信弹窗  取消
    cancelWXBind() {
      this.isShowWxBind = false;
      this.isDisabled = false;
    },
    // 绑定微信
    tap2bindWx() {
      this.isShowWxBind = false; 
      this.$bridge.callHandler("bindWXAccount",{}, res => {
        let resData = JSON.parse(res);
        this.isDisabled = false;
         if(resData.msg=="success"){
          let sendData = {
            uniqueId: window.localStorage.getItem("uniqueIdByInfluencer"),
            wxUnionId: resData.wxUnionId,
            wxOpenId: resData.wxOpenId
          };
          this.$http.post("user/bindWxInfo", sendData).then(() => { 
            
            this.initAmt();
            this.initAmtList(); 
            this.isShowWxBind = false;
            this.isDisabled = false;
            Dialog.confirm({ 
              message: "微信绑定成功！",
              showCancelButton: false,
              confirmButtonText: "我知道了",
              beforeClose: (action, done) => { 
                done();
              }
            });
          });
         }else if(resData.msg=="cancel"){
           Toast.fail("微信绑定失败");
        }else {
          Dialog.confirm({
            title: "微信绑定失败",
            message:
              `请确定您微信绑定银行卡的真实名字是${this.name}，名字错误会导致打款失败`,
            showCancelButton: false,
            confirmButtonText: "我知道了",
            beforeClose: (action, done) => {
              done();
            }
          });
        }
      });  
    }
  }
};
</script>

<style scoped lang="scss">
.withdrawal {
  width: 686px;
  margin: 0 auto 150px;
  .wd-header {
    padding: 32px 0;
    border-bottom: 1px solid rgba(237, 237, 237, 1);
    .tips {
      font-size: 24px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(129, 129, 129, 1);
      line-height: 33px;
    }
    .money {
      font-size: 40px;
      font-family: PingFangSC-Medium;
      font-weight: 700;
      color: rgba(48, 49, 51, 1);
      line-height: 56px;
      margin-top: 4px;
    }
  }
  .wd-way {
    padding: 32px 0;
    .title {
      font-size: 40px;
      font-family: PingFangSC-Medium;
      font-weight: 700;
      color: rgba(48, 49, 51, 1);
      line-height: 56px;
    }
    .wd-way-wrap {
      width: 100%;
      height: 42px;
      margin: 32px 0 40px;
      font-size: 30px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 49, 51, 1);
      line-height: 42px;
      position: relative;
      .radio-box {
        height: 42px;
        position: absolute;
        top: 0;
        .radio {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          margin-top: 5px;
          &.radioBorder {
            border: 2px solid #ededed;
          }
          img {
            width: 100%;
            position: relative;
            top: -7px;
          }
        }
        .payWay {
          height: 100%;
          line-height: 42px;
          margin-left: 15px;
        }
      }
      .radio-box2 {
        right: 166px;
      }
    }
    .amt-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      .amt-item {
        width: 202px;
        height: 80px;
        background: rgba(237, 237, 237, 1);
        border-radius: 8px;
        font-size: 34px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 49, 51, 1);
        line-height: 80px;
        text-align: center;
        margin-top: 24px;
        &.active {
          color: #fff;
          background: rgba(255, 37, 37, 1);
        }
      }
    }
    .tips-box {
      width: 100%;
      margin-top: 24px;
      .red-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        overflow: hidden;
        background: rgba(255, 37, 37, 1);
        position: relative;
        top: 19px;
      }
      .tips-content {
        width: 650px;
        font-size: 28px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(129, 129, 129, 1);
        line-height: 48px;
        margin-left: 18px;
      }
    }
  }
  .wd-footer {
    width: 100%;
    text-align: center;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    .wd-ins {
      width: 100%;
      font-size: 28px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 49, 51, 1);
    }
    .form-btn {
      display: block;
      width: 562px;
      height: 88px;
      font-size: 34px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #fff;
      line-height: 88px;
      background: rgba(254, 37, 37, 1);
      border-radius: 44px;
      margin: 32px auto 16px;
    }
  }
}
.wxbind-box {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  border-radius: 24px 24px 0px 0px;
  text-align: center;
  .bind-cancel {
    font-size: 34px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(129, 129, 129, 1);
    line-height: 48px;
    position: absolute;
    top: 32px;
    left: 32px;
  }
  img {
    width: 88px;
    margin: 108px auto 40px;
  }
  .tips {
    font-size: 32px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(48, 49, 51, 1);
    line-height: 45px;
  }
  .form-btn {
    display: block;
    width: 562px;
    height: 88px;
    font-size: 34px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #fff;
    line-height: 88px;
    background: rgba(254, 37, 37, 1);
    border-radius: 44px;
    margin: 32px auto 16px;
  }
}
</style>
